<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-button @click="goBack">
            <ion-icon :icon="arrowBackOutline"></ion-icon>
          </ion-button>
        </ion-buttons>
        <ion-title>用户服务协议</ion-title>
        <ion-buttons slot="end">
          <ion-button fill="clear">
            <ion-icon :icon="ellipsisHorizontalOutline"></ion-icon>
          </ion-button>
          <ion-button fill="clear">
            <ion-icon :icon="shareOutline"></ion-icon>
          </ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true" class="ion-padding">
      <div class="agreement-container">
        <!-- 协议标题 -->
        <div class="agreement-header">
          <h1>用户服务协议</h1>
          <p class="update-time">更新时间：2024年12月19日</p>
        </div>

        <!-- 协议概述 -->
        <ion-card class="overview-card">
          <ion-card-content>
            <p>
              欢迎使用客户租房系统！本协议是您与客户租房系统之间关于使用本平台服务的法律协议。
              请您仔细阅读本协议的全部条款，特别是免除或者限制责任的条款、法律适用和争议解决条款。
              您点击"同意"或使用本服务，即表示您已阅读并同意遵守本协议。
            </p>
          </ion-card-content>
        </ion-card>

        <!-- 目录 -->
        <ion-card class="toc-card">
          <ion-card-header>
            <ion-card-title>目录</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <div class="toc-item" @click="scrollToSection('section1')">
              <span class="toc-number">第一部分</span>
              <span class="toc-title">服务条款与使用规则</span>
            </div>
            <div class="toc-item" @click="scrollToSection('section2')">
              <span class="toc-number">第二部分</span>
              <span class="toc-title">用户权利与义务</span>
            </div>
            <div class="toc-item" @click="scrollToSection('section3')">
              <span class="toc-number">第三部分</span>
              <span class="toc-title">隐私保护与数据安全</span>
            </div>
            <div class="toc-item" @click="scrollToSection('section4')">
              <span class="toc-number">第四部分</span>
              <span class="toc-title">免责声明与法律适用</span>
            </div>
          </ion-card-content>
        </ion-card>

        <!-- 第一部分 -->
        <ion-card id="section1" class="section-card">
          <ion-card-header>
            <ion-card-title>第一部分 服务条款与使用规则</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <div class="article">
              <h4>1. 服务内容</h4>
              <p>
                闲鱼客户租房系统为用户提供房屋租赁信息发布、查询、匹配等服务。
                我们致力于为房东和租客搭建一个安全、便捷的租房交易平台，
                提供包括但不限于房源发布、房源搜索、在线沟通、合同管理等功能。
              </p>
            </div>

            <div class="article">
              <h4>2. 用户注册与账户管理</h4>
              <p>
                用户需要提供真实、准确、完整的个人信息进行注册。
                用户有义务及时更新注册信息，确保信息的真实性和有效性。
                用户应当妥善保管账户信息，对账户下的所有活动承担责任。
                如发现账户被盗用或存在安全隐患，应立即通知平台。
              </p>
            </div>

            <div class="article">
              <h4>3. 平台使用规范</h4>
              <p>
                用户在使用平台服务时，应当遵守国家法律法规和平台规则，
                不得发布虚假信息、进行欺诈行为或损害他人合法权益。
                禁止利用平台进行任何违法违规活动，包括但不限于洗钱、
                传销、赌博等行为。平台有权对违规行为进行处理。
              </p>
            </div>
          </ion-card-content>
        </ion-card>

        <!-- 第二部分 -->
        <ion-card id="section2" class="section-card">
          <ion-card-header>
            <ion-card-title>第二部分 用户权利与义务</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <div class="article">
              <h4>1. 用户权利</h4>
              <p>
                用户有权免费注册和使用平台基础服务，有权获得平台提供的技术支持和客户服务。
                用户对其发布的信息享有知识产权，平台承诺保护用户的合法权益。
                用户有权随时注销账户，平台将按照相关规定处理用户数据。
              </p>
            </div>

            <div class="article">
              <h4>2. 用户义务</h4>
              <p>
                用户应当诚实守信，提供真实有效的房源信息和个人信息。
                房东用户应确保房源的合法性，具备出租资格和相关证件。
                租客用户应如实提供个人信息，配合房东进行必要的身份验证。
                所有用户都应当遵守平台规则，维护平台秩序。
              </p>
            </div>
          </ion-card-content>
        </ion-card>

        <!-- 第三部分 -->
        <ion-card id="section3" class="section-card">
          <ion-card-header>
            <ion-card-title>第三部分 隐私保护与数据安全</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <div class="article">
              <h4>1. 隐私保护</h4>
              <p>
                我们严格遵守相关法律法规，保护用户隐私信息安全。
                未经用户同意，我们不会向第三方披露用户个人信息。
                我们采用先进的技术手段和管理措施，确保用户数据安全。
              </p>
            </div>

            <div class="article">
              <h4>2. 数据使用</h4>
              <p>
                平台收集的用户信息仅用于提供服务、改善用户体验和保障交易安全。
                我们可能会对用户数据进行统计分析，但不会涉及具体的个人隐私信息。
                用户有权查询、修改或删除其个人信息。
              </p>
            </div>
          </ion-card-content>
        </ion-card>

        <!-- 第四部分 -->
        <ion-card id="section4" class="section-card">
          <ion-card-header>
            <ion-card-title>第四部分 免责声明与法律适用</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <div class="article">
              <h4>1. 免责声明</h4>
              <p>
                平台仅提供信息发布和匹配服务，不参与具体的租赁交易。
                用户之间的租赁关系及由此产生的纠纷，平台不承担法律责任。
                平台会尽力确保信息的准确性，但不对信息的真实性承担保证责任。
              </p>
            </div>

            <div class="article">
              <h4>2. 法律适用</h4>
              <p>
                本协议的签订、履行、解释及争议解决均适用中华人民共和国法律。
                如发生争议，双方应友好协商解决；协商不成的，
                可向平台所在地人民法院提起诉讼。
              </p>
            </div>

            <div class="article">
              <h4>3. 协议修改</h4>
              <p>
                平台有权根据业务发展需要修改本协议，修改后的协议将在平台公布。
                用户继续使用服务即视为同意修改后的协议。
                如用户不同意修改内容，可以停止使用服务并注销账户。
              </p>
            </div>
          </ion-card-content>
        </ion-card>

        <!-- 联系方式 -->
        <ion-card class="contact-card">
          <ion-card-content>
            <h4>联系我们</h4>
            <p>如您对本协议有任何疑问，请通过以下方式联系我们：</p>
            <p>客服电话：400-123-4567</p>
            <p>客服邮箱：service@xianyu-rent.com</p>
            <p>工作时间：周一至周日 9:00-21:00</p>
          </ion-card-content>
        </ion-card>
      </div>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonButtons,
  IonButton,
  IonIcon,
  IonCard,
  IonCardContent,
  IonCardHeader,
  IonCardTitle
} from '@ionic/vue'
import {
  arrowBackOutline,
  ellipsisHorizontalOutline,
  shareOutline
} from 'ionicons/icons'

const router = useRouter()

// 返回上一页
const goBack = () => {
  router.back()
}

// 滚动到指定章节
const scrollToSection = (sectionId: string) => {
  const element = document.getElementById(sectionId)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}
</script>

<style scoped>
.agreement-container {
  max-width: 800px;
  margin: 0 auto;
}

.agreement-header {
  text-align: center;
  margin-bottom: 20px;
}

.agreement-header h1 {
  font-size: 24px;
  font-weight: bold;
  color: var(--ion-color-primary);
  margin: 0 0 8px 0;
}

.update-time {
  color: var(--ion-color-medium);
  font-size: 14px;
  margin: 0;
}

.overview-card {
  margin-bottom: 16px;
  background: var(--ion-color-light);
}

.toc-card {
  margin-bottom: 20px;
}

.toc-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--ion-color-light);
}

.toc-item:last-child {
  border-bottom: none;
}

.toc-item:hover {
  background: var(--ion-color-light);
  border-radius: 4px;
  padding-left: 8px;
  margin-left: -8px;
}

.toc-number {
  font-weight: bold;
  color: var(--ion-color-primary);
  min-width: 80px;
}

.toc-title {
  color: var(--ion-color-dark);
}

.section-card {
  margin-bottom: 20px;
}

.article {
  margin-bottom: 20px;
}

.article h4 {
  color: var(--ion-color-primary);
  font-weight: bold;
  margin: 0 0 8px 0;
}

.article p {
  line-height: 1.6;
  color: var(--ion-color-dark);
  margin: 0;
  text-align: justify;
}

.contact-card {
  background: var(--ion-color-light);
  margin-bottom: 20px;
}

.contact-card h4 {
  color: var(--ion-color-primary);
  margin: 0 0 12px 0;
}

.contact-card p {
  margin: 4px 0;
  color: var(--ion-color-dark);
}
</style>
